<template>
  <h2>我是B组件</h2>
  <ul class="crumbs">
    <li v-for="(item, index) in path" :key="index">{{ item }}</li>
  </ul>
  <button @click="gotoC">c组件</button>
  <button @click="gotoDefault">默认组件</button>
  <hr>
  <router-view></router-view>
</template>

<script lang="ts" setup>
import { computed } from '@vue/reactivity';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter();
//地址
let path = computed(() => {
  return route.path.split('/').filter(item => item !== '')
})

const gotoC = () => {
  router.push({
    path: '/B/C'
  })
  console.log(path);

}

const gotoDefault = () => {
  router.push({
    path: '/B/default'
  })
  console.log(route.matched);
}
</script>

<style lang="less" scoped>
.crumbs {
  display: flex;
  justify-content: space-around;
}
</style>